<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Table</title>
		<style type="text/css">
			table,thead,th,td {
				border: 1px #333333 solid;
			}
			.del {
				color: #1E90FF;
				text-decoration: underline;
			}
			.del:hover {
				color: #FF6700;
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div id="text"></div>
		<input type="button" onclick="addText()" />
		<table id="tb1">
			<thead>
				<th width="200px">a</th>
				<th>b</th>
				<th>c</th>
				<th>操作栏</th>
			</thead>
			<tr>
				<td>1111</td>
				<td>2222</td>
				<td>3333</td>
				<td class="del" onclick="del(this)">删除</td>
			</tr>
			<tr>
				<td>4444</td>
				<td>5555</td>
				<td>6666</td>
				<td class="del" onclick="del(this)">删除</td>
			</tr>
		</table>		
	</body>
	<script type="text/javascript">
		//创建一个文本节点
		function addText() {
//			let oText = document.createTextNode('我是被创建的文本节点')
//			let oTextWrapper = document.getElementById('text')
//			
//			let oP = document.createElement('p')
//			oP.innerText = '我是被创建的p节点'
//			oTextWrapper.appendChild(oP)
			let oTableWarrper = document.getElementById('tb1')
			let oTr = document.createElement('tr')
			let oTd1 = document.createElement('td')
			let oTd2 = document.createElement('td')
			let oTd3 = document.createElement('td')
			let oTd4 = document.createElement('td')
			oTd1.innerText = '王五'
			oTd2.innerText = '003'
			oTd3.innerText = '计算机'
			oTd4.innerText = '删除'
			oTd4.className = 'del'
			oTd4.setAttribute('onclick','del(this)')
			let oTv = document.createElement('div')
			oTr.appendChild(oTd1)
			oTr.appendChild(oTd2)
			oTr.appendChild(oTd3)
			oTr.appendChild(oTd4)
			oTableWarrper.appendChild(oTr)
		}
		function del(e) {
			e.parentNode.remove()//删除对象e的父节点
			//e.parentNode.parentNode.removeChild(e.parentNode)//删除对象的父节点的父节点的子节点
		}
	</script>
</html>
